Validation Javascript

Description

Defines javascript used to do client-side validation of data entered into an application.

images/vj9.png
An error message defined using Javascript

Only available if Immediate validation is set to 'Client-side only' or 'Client-side and Server-side'. Specify Javascript to validate the data in the field. Client-side validation is very fast because it does not require making an Ajax callback to the server. Your Javascript code can use the 'data' variable name to refer to the current value in the control. Your code should include a 'return' statement that returns true or a string with an error message. For example: return true; (no error) or return 'Value is not valid.'; (if there is an error.)

Use Validation Javascript to Limit the Length of a Zip Code

  1. In the UX Builder on the UX Controls page open the 'Data Controls' menu. Click on the [TextBox] option to add a textbox control to the component. Give the textbox control the name and label 'zip'.

    images/vj2.png
  2. Highlight the textbox control. In the properties list on the right click on the ... button next to the 'Validation rules' property in the Field Properties section.

    images/vj3.png
  3. Check the 'Enable rules' checkbox.

    images/vj4.png
  4. In the 'Text Format' section check the 'Allow digits' checkbox. Click OK.

    images/vj5.png
  5. Click the ... button next to the 'Validation Javascript' property.

    images/vj6.png
  6. Add the following code to the 'Javascript for Client-side Validation of UX Control' dialog, then click OK.

    if(data.length !=5) return 'invalid zip code';
    images/vj7.png
  7. In the Data Controls menu click on the [TextBox] option again to add a second textbox to your component. The name and label doesn't matter.

    images/vj8.png
  8. Run the component in Live Preview. Enter a number that is not 5 digits long into the zip textbox, then click on the second textbox. The error message you defined should appear.

    images/vj9.png
  9. Now enter a 5 digit zip code into the textbox and click on the second textbox. The error message should go away.

    images/vj10.png

See Also